<template>
  <div class="pos">
    <div class="pos-content">
      <el-row>
        <el-col :span='7'>
          <el-tabs>
            <el-tab-pane label="点餐">
              <el-table :data="tableData" border :summary-method="getSummaries" show-summary class="el-100">
                <el-table-column prop="goodsName" label="商品"></el-table-column>
                <el-table-column prop="count" label="数量" width="60"></el-table-column>
                <el-table-column prop="price" label="金额" width="60"></el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delGood(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="clickGood(scope.row)">增加</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="btn-class">
                <el-button type="warning">挂单</el-button>
                <el-button type="danger" @click="delAllGood">删除</el-button>
                <el-button type="success" @click="over">结账</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="挂单">
              挂单
            </el-tab-pane>
            <el-tab-pane label="外卖">
              外卖
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <!--商品展示-->
        <el-col :span="17">
          <div class="often-goods">
            <div class="title">常用商品</div>
            <div class="often-goods-list">
              <ul>
                <li v-for="(goods,k) in oftenGoods" :key="k" @click="clickGood(goods)">
                  <span>{{goods.goodsName}}</span>
                  <span class="o-price">￥{{goods.price}}元</span>
                </li>
              </ul>
            </div>
            <div class="goods-type">
              <el-tabs>
                <el-tab-pane label="汉堡">
                  <ul class='cookList'>
                    <li v-for="(item,k) in type0Goods" :key="k" @click="clickGood(item)">
                      <span class="foodImg">
                        <img :src="item.goodsImg" width="100%">
                      </span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}元</span>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="小食">
                  <ul class='cookList'>
                    <li v-for="(item,k) in type1Goods" :key="k" @click="clickGood(item)">
                      <span class="foodImg">
                        <img :src="item.goodsImg" width="100%">
                      </span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}元</span>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="饮料">
                  <ul class='cookList'>
                    <li v-for="(item,k) in type2Goods" :key="k" @click="clickGood(item)">
                      <span class="foodImg">
                        <img :src="item.goodsImg" width="100%">
                      </span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}元</span>
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="套餐">
                  <ul class='cookList'>
                    <li v-for="(item,k) in type3Goods" :key="k" @click="clickGood(item)">
                      <span class="foodImg">
                        <img :src="item.goodsImg" width="100%">
                      </span>
                      <span class="foodName">{{item.goodsName}}</span>
                      <span class="foodPrice">￥{{item.price}}元</span>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: "pos",
    data() {
      return {
        tableData: [],
        oftenGoods: [],
        type0Goods: [],
        type1Goods: [],
        type2Goods: [],
        type3Goods: [],
      };
    },
    created() {
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
        .then(pos => {
          this.oftenGoods = pos.data
          // console.log(pos)
        })
        .catch(err => {
          console.log(err)
        }),
        axios.get('http://jspang.com/DemoApi/typeGoods.php')
        .then(pos => {
          pos.data.forEach((item, index) => {
            this['type' + index + 'Goods'] = item
          });
        })
        .catch(err => {
          console.log(err)
        })
    },
    methods: {
      // 增加
      clickGood(goods) {
        // console.log(goods)
        let t = false;
        // 判断列表中是否存在
        this.tableData.forEach(item => {
          if (item.goodsId === goods.goodsId) {
            t = true;
          }
        })
        // 事件
        if (t) {
          // 代表存在
          let arr = this.tableData.filter(o => o.goodsId == goods.goodsId)
          arr[0].count++;
        } else {
          // 代表不存在
          let obj = {
            goodsId: goods.goodsId,
            goodsName: goods.goodsName,
            price: goods.price,
            count: 1
          }
          this.tableData.push(obj)
        }
      },
      // 合计
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];

        // 得到每列数据
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          let values = data.map(item => Number(item[column.property]));
          // 如果为第二列的时候
          if (index === 2) {
            values = data.map(item => Number(item.price * item.count))
          }
          // 计算数值
          let n = 0;
          values.forEach(item => {
            n += item
          });
          // 是否为空
          if (isNaN(n)) {
            return n = '';
          }
          sums[index] = n
        });

        // 必须返回一个数据否则报错
        return sums
      },
      // 删除
      delGood(goods) {
        this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId)
      },
      // 全部删除
      delAllGood() {
        this.tableData = [];
      },
      // 结账
      over() {
        if (this.tableData.length != 0) {
          this.tableData = []
          this.$message.success('成功')
        } else {
          this.$message.error('失败')
        }
      }
    }
  };

</script>
